<template>
  <!-- 资产库管理 -->
  <div class="app-container hk-flex-column">
    <el-row :gutter="20" class="app-row">
      <!-- 右侧主题 -->
      <div class="col-right">
        <!-- 搜索框 -->
        <div style="display: flex" class="new-asset">
          <search-form
            :data="queryParams"
            :field-list="fieldList"
            :list-type-info="dictList"
            :is-asset="true"
            style="padding-bottom: 0rem"
            @handleSearch="handleQuery"
            @handleReset="resetQuery"
            @handleInfo="handleInfo" />
        </div>
        <!-- 按钮组 -->

        <!-- 表格 -->
        <hk-table
          :table-data="tableData"
          :table-columns="tableList"
          :selection="true"
          :show-index="true"
          :total="total"
          :loading="loading"
          :table-height="80"
          operate
          :common-fixed="true"
          :query-params="queryParams"
          :operate-width="220"
          :pager-count="5"
          @handleSelectionChange="handleSelectionChange"
          @changePage="getDataList">
          <!-- 更改表格中数据的样式 -->
          <!-- 设备名称 -->
          <template #assetName="scope">
            <div style="display: flex">
              <el-tooltip v-if="scope.row.assetName.length > 5 && scope.row.assetName.length < 21" placement="top">
                <span slot="content">{{ scope.row.assetName }}</span>
                <span
                  style="
                    display: inline-block;
                    max-width: 50%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                  >{{ scope.row.assetName }}</span
                >
              </el-tooltip>
              <span
                v-else
                style="
                  display: inline-block;
                  max-width: 50%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                >{{ scope.row.assetName }}</span
              >
            </div>
          </template>
          <!-- 操作权限 -->
          <template #operate="scope">
            <!-- {{ scope.row.assetDepartmentId }} -->
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情 </el-button>

            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
            <!-- <el-button size="mini" type="text" @click="handleEdit(scope.row)">标签打印 </el-button> -->
            <!-- <el-button
              v-if="scope.row.status === '审核中'"
              size="mini"
              type="text"
              @click="handleExamine(scope.row)"
            >审核
            </el-button> -->
          </template>
        </hk-table>
        <div class="table-out">
          <div class="out-son">
            <el-row style="padding-top: 1.25rem; display: flex">
              <el-button type="primary" size="mini" icon="el-icon-delete" @click="handleDelete()">批量删除</el-button>
            </el-row>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform/index.vue'
import HkTable from '@/components/Hk-Table/index.vue'

import { abandonedAssets, getDict, deleteItem } from '@/api/specialProject/asset'

export default {
  components: {
    SearchForm,
    HkTable,
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, '路由')
    if (to.path === '/specialProject/assets/assetLibraryDetail') {
      const condition = JSON.stringify(this.queryParams)
      sessionStorage.setItem('condition', condition)
    } else {
      sessionStorage.removeItem('condition')
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, '路由')
    if (from.path !== '/specialProject/assets/assetLibraryDetail') {
      sessionStorage.removeItem('condition')
    }
    next()
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      selectArr: [],
      // 搜索框
      fieldList: [
        {
          label: '关键字',
          type: 'input',
          field: 'keyword',
          maxlength: 20,
          width: '250px',
          placeholder: '请输入设备名称、编号、IP或责任人',
        },
        {
          label: '设备密级',
          type: 'select',
          field: 'securityLevel',
          maxlength: 20,
          list: 'levelList',
          width: '150px',
        },
      ],
      dictList: {
        levelList: [],
      },

      defaultExpandedKeys: [],
      // 表格
      tableList: [
        { label: '设备名称', param: 'assetName', type: 'slot', width: '200' },
        { label: '设备编号', param: 'assetCode' },
        { label: '报废前设备IP', param: 'ip', width: '150' },
        // { label: '设备MAC', param: 'mac', width: '200' },
        // { label: '类别', param: 'assetCategory', width: '150' },
        { label: '设备类型', param: 'assetType', width: '200' },
        // { label: '联网类型', param: 'networkConnectionType', width: '150' },
        { label: '报废前责任人', param: 'ownerName', width: '150' },
        // { label: '责任部门', param: 'assetDepartmentName', width: '200' },
        { label: '存放位置', param: 'storageLocation' },
      ],
      tableData: [],
      queryParams: {
        current: 1,
        size: 10,
      },
      loading: false,
      // 选中的id值们
      ids: [],
      // 非多个禁用
      // 弹框的标题
      title: '',
      // 分页总条数
      total: 0,
      code: this.$route.query.id,
    }
  },
  created() {
    var cd = sessionStorage.getItem('condition')
    if (cd) {
      var condition = JSON.parse(cd)
      this.queryParams = condition
    }
  },
  mounted() {
    this.getDataList()
    this.getDictDatas()
  },
  methods: {
    // 关闭弹窗
    closeBorrow() {
      this.borrowVisible = false
      this.tranVisible = false
    },
    handleInfo(e) {
      console.log(e, 'eee')

      this.queryParams.assetType = e.dictKey
    },
    //  查询列表
    getDataList() {
      this.loading = true
      abandonedAssets(this.queryParams).then((res) => {
        // 返回值为null，展示---
        res.list.forEach((element) => {
          for (const key in element) {
            element[key] = element[key] || '—'
          }
        })
        this.tableData = res.list
        this.total = res.total
        this.loading = false
        const condition = JSON.stringify(this.queryParams)
        sessionStorage.setItem('condition', condition)
      })
    },
    // 详情
    handleDetail(row) {
      this.$router.push({
        path: '/specialProject/assets/assetLibraryDetail',
        query: {
          id: row.id,
          title: '详情',
          dictValue: row.dictItems.dictValue,
          dictKey: row.dictItems.dictKey,
          dictId: row.dictItems.id,
        },
      })
    },
    // 字典获取
    getDictDatas() {
      // 设备密级
      getDict({ code: 'securityLevel' }).then((res) => {
        this.dictList.levelList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
    },

    // 多选框选中数据   控制批量
    handleSelectionChange(selection) {
      console.log(selection, 'selection')
      this.selectArr = selection
      this.ids = selection.map((item) => item.id)
    },
    // 删除数据
    handleDelete(row) {
      const id = (row && row.id) || this.ids.join(',')
      this.$modal
        .confirm('您确定要删除当前数据吗')
        .then(function () {
          return deleteItem(id)
        })
        .then(() => {
          this.$modal.msgSuccess('删除成功')
          this.getDataList()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 搜索按钮
    handleQuery(val) {
      this.queryParams.current = 1
      this.getDataList()
    },
    // 重置按钮
    resetQuery() {
      this.queryParams = {}
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.choseName = ''
      this.choseType = ''
      this.getDataList()
    },

    // 详情
  },
}
</script>
<style lang="scss" scoped>
::v-deep .reverse {
  .el-select .el-input .el-select__caret.is-reverse {
    transform: rotateZ(0deg) !important;
  }
}
.table-out {
  position: relative;
  .out-son {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.middle {
  height: 100%;
  text-align: center;
}
.ca-select {
  width: 220px;
  min-height: 32px;
  .fake {
    float: left;
    z-index: 9;
  }
  .test {
    float: left;
    visibility: hidden;
    width: 0px;
    height: 0px;
    z-index: -1;
  }
}
.clearfix:after {
  /*添加一个内容*/
  content: '';
  /*转换为一个块元素*/
  display: block;
  /*清除两侧的浮动*/
  clear: both;
}
.test {
  visibility: hidden;
}
// 深色背景下
#app.dark-theme {
  .header-top,
  .header-bottom,
  .app-container .app-row {
    background: transparent !important;
    color: #fff !important;
  }
  .bottom-box {
    color: #fff;
    border: 0.0625rem solid #097597;
  }
  .box-one,
  .box-three-right {
    border-right: 0.0625rem solid #097597;
  }
  .bf-status {
    color: #fff;
  }
}

.dialog-row {
  height: 12.5rem;
  padding: 1.25rem;
}
.asset-type {
  border-radius: 0.125rem;
  margin: 0.625rem;
  // padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  // width: 6.25rem;
  height: 2rem;
  line-height: 2rem;
  border: 0.0625rem solid rgba(217, 217, 217, 1);
  border-radius: 0.25rem;
  background: transparent;
  &:hover {
    background: #5170e7;
    color: #fff;
  }
}
.chose {
  background: #5170e7;
  color: #fff;
}
.bf-status {
  color: #2f343e;
}
.app-container {
  background: #eef0f5 !important;
  padding: 0rem !important;
  height: 100%;
  .header-top {
    background: #fff;
    padding: 1.25rem;
    padding-bottom: 0rem;
    // padding-right: % !important;
    border-radius: 0.25rem;
    display: flex;
  }
  .header-bottom {
    background: #fff;
    padding: 1.25rem;
    padding-top: 0rem !important;
    border-radius: 0.25rem;
    display: flex;
    margin-bottom: 1.25rem;
    // padding-bottom: 2.5rem;
    font-size: 0.75rem;
    width: 100%;
    // display: inline-block;
    overflow-x: auto;
    // justify-content: space-between;
    .bottom-box {
      display: flex;
      border: 0.0625rem solid rgba(217, 217, 217, 1);
      border-radius: 0.125rem;
      margin-right: 0.625rem;
      flex-shrink: 0;
      // cursor: pointer;
      .box-one {
        height: 2.1875rem;
        padding: 0.8125rem 0.625rem;
        border-right: 0.0625rem solid rgba(217, 217, 217, 1);
      }
      .box-two {
        height: 2.1875rem;
        padding: 0.8125rem 0.625rem;
        border-right: 0.0625rem solid rgba(217, 217, 217, 1);
      }
      .box-three {
        height: 2.1875rem;
        padding: 0.8125rem 0.625rem;
      }
      .box-three-right {
        border-right: 0.0625rem solid rgba(217, 217, 217, 1);
        height: 2.1875rem;
        padding: 0.8125rem 0.625rem;
      }
    }
  }
  .app-row {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    display: flex;
    background: #fff !important;
    overflow: auto;

    .col-left {
      height: 100%;
      display: flex;
      flex-direction: column;
      width: 12.5rem;
      padding: 1.25rem;
      overflow: auto;
      border-right: 0.0625rem solid rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
    }
    .col-right {
      padding: 1.25rem;
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .bac-red {
        display: inline-block;
        text-align: center;
        // width: 3.125rem;
        padding: 0px 10px;
        height: 1.25rem;
        line-height: 1.25rem;
        background: rgba(255, 53, 53, 0.1);
        border: 0.0625rem solid rgba(255, 53, 53, 1);
        border-radius: 0.75rem;
        color: #ff3535;
        font-size: 0.75rem;
      }
      .bac-pink {
        display: inline-block;
        text-align: center;
        // width: 3.125rem;
        padding: 0px 10px;
        height: 1.25rem;
        line-height: 1.25rem;
        background: rgba(255, 103, 39, 0.1);
        border: 0.0625rem solid rgba(255, 103, 39, 1);
        border-radius: 0.75rem;
        color: #ff6727;
        font-size: 0.75rem;
      }
      .bac-blue {
        display: inline-block;
        text-align: center;
        // width: 3.125rem;
        padding: 0px 10px;
        height: 1.25rem;
        line-height: 1.25rem;
        background: rgba(58, 191, 129, 0.1);
        border: 0.0625rem solid rgba(58, 191, 129, 1);
        border-radius: 0.75rem;
        color: #3abf81;
        font-size: 0.75rem;
      }
      .bac-green {
        display: inline-block;
        text-align: center;
        // width: 3.125rem;
        padding: 0px 10px;
        height: 1.25rem;
        line-height: 1.25rem;
        background: rgba(24, 95, 219, 0.1);
        border: 0.0625rem solid #607ff1;
        border-radius: 0.75rem;
        color: #607ff1;
        font-size: 0.75rem;
      }
    }
  }
}
::v-deep {
  .content[data-v-307320bc] {
    margin-bottom: 0rem !important;
  }
  // 去掉表格里多出来的横线
  .el-table__fixed {
    width: 0;
  }
  // 树形文本超出显示省略号
  .el-tree-node__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-table__cell {
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis !important;
  }
  .hk-tag {
    margin: 0 0.3125rem;
    margin-top: 0.3125rem;
  }

  .activeName {
    background: rgba(24, 95, 219, 0.1);
  }
}
// ::v-deep .el-dialog__body {
//   padding: 0 !important;
// }
.roku {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }
}
::v-deep .el-divider--horizontal {
  margin: 0 !important;
}
</style>
